<template>
  <div class="out-box">
    <div class="line-operate-box">
      <a-button type="primary" @click="addTarget" v-userAuth="'D7-2'">
        <!-- <i class="icon icon-new16f operate-icon"></i> -->
        <Iconfont class="icon operate-icon" type="icon-new16f"></Iconfont>
        {{$t('Add-new')}}
      </a-button>
    </div>
    <!-- 表格 -->
    <a-table
      class='tabstyle'
      :columns="pathColumns"
      :loading="tableLoading"
			:dataSource="tableData"
      size="small"
      :pagination="pagination"
      :rowKey="(record) => record.name" 
      :locale="defaultSetting"
      bordered
    >
      <!-- 网关节点 -->
      <template slot="gatewayNode" slot-scope="text, record">
        <span>{{ text.length === 0 ? '-' : text.join(',') }}</span>
      </template>
      <!-- 客户端组 -->
      <template slot="clientGroup" slot-scope="text, record">
        <span>{{ text ? text : '-' }}</span>
      </template>
      <template slot="status" slot-scope="text, record">
        <div v-if="text">
          <span class="green-circle"></span>
          {{ $t('Connected') }}
        </div>
        <div v-else>
          <span class="orange-circle"></span>
          {{ $t('Not-connected') }}
        </div>
      </template>
      <template slot="operation" slot-scope="text, record">
        <!--拓扑图-->
				<a-tooltip placement='top'>
	        <template slot='title'>
	          <span>{{$t('Topology-graph')}}</span>
	        </template>
					<!-- <i 
						class="icon icon-impower16f table-operation-icon"
						@click="openTopology(record)"
					></i> -->

          <Iconfont class="icon table-operation-icon" type="icon-impower16f" @click="openTopology(record)"></Iconfont>
	      </a-tooltip>
				<a-tooltip placement='top' v-userAuth="'D7-3'">
          <template slot='title'>
            <span>{{$t('Edit')}}</span>
          </template>
          <!-- <i
            class="icon icon-edit16f table-operation-icon"
            @click="editAccessPath(record)"
          ></i> -->
          <Iconfont class="icon table-operation-icon" type="icon-edit16f" @click="editAccessPath(record)"></Iconfont>
        </a-tooltip>
        <a-tooltip placement='top' v-userAuth="'D7-4'">
          <template slot='title'>
            <span>{{$t('Delete')}}</span>
          </template>
          <!-- <i
            class="icon icon-delete16f table-operation-icon"
            @click="delAccessPath(record)"
          ></i> -->
          <Iconfont class="icon table-operation-icon" type="icon-delete16f" @click="delAccessPath(record)"></Iconfont>
        </a-tooltip>
			</template>
    </a-table>

    <!-- 拓扑图 -->
		<TopologyGraph
			:visible="topologyVisible"
			:targetClient="targetData"
			@closeTopologyModal="closeOperationModal"
		/>

    <!-- 新增访问路径 -->
    <AddTarget 
      :modalVisible="addAccessPathModal"
      :gatewayInfo="gatewayInfo"
      @closeOperationModal="closeOperationModal"
      @updateData="updateData"
    />

    <!-- 编辑访问路径 -->
    <EditTarget
      :modalVisible="editAccessPathModal"
      :gatewayInfo="gatewayInfo"
      :targetData="targetData"
      @closeOperationModal="closeOperationModal"
      @updateData="updateData"
    />

    <!-- 删除访问路径 -->
    <DelTarget
      :modalVisible="delAccessPathModal"
      :targetData="targetData"
      @closeOperationModal="closeOperationModal"
      @updateData="updateData"
    />
  </div>
</template>

<script>
import EmptyData from '@/components/common/EmptyData'
import TopologyGraph from '@/components/storage_mgr/block/iscsiOper/TopologyGraph'
import AddTarget from '@/views/storage_mgr/osd/iscsi/accessPathOperate/AddTarget'
import EditTarget from '@/views/storage_mgr/osd/iscsi/accessPathOperate/EditTarget'
import DelTarget from '@/views/storage_mgr/osd/iscsi/accessPathOperate/DelTarget'
import { sortName } from '@/assets/js/tableSortMethods'


export default {
  name: "AccessPath",
  components: { TopologyGraph, AddTarget, EditTarget, DelTarget },

  data() {
    return {
      tableLoading: false,
			defaultSetting: {emptyText:<EmptyData />},
      pagination: {
	      defaultPageSize: 5,
	      showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
	      showSizeChanger: true,
	      pageSizeOptions: ['5', '10', '15', '20'],
				// onChange: (page, pageSize) =>  {this.selectedRowKeys = []; },
	      onShowSizeChange:(current, pageSize) => this.pageSize = pageSize,
				buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
	    },
      pathColumns: [
        {
          title: this.$t('Name2'),
			  	dataIndex: 'name',
			  	key: 'name',
			  	ellipsis: true,
          sorter: (a, b) => this.sortName(a.name, b.name),
        },
        {
          title: this.$t('Gateway-node'),
			  	dataIndex: 'hostname',
			  	key: 'hostname',
          ellipsis: true,
          scopedSlots:{customRender:'gatewayNode'},
          sorter: (a, b) => a.hostname.length - b.hostname.length,
        },
        {
          title: this.$t('Client-group'),
			  	dataIndex: 'groups',
			  	key: 'groups',
          ellipsis: true,
          scopedSlots:{customRender:'clientGroup'},
          sorter: (a, b) => this.sortName(a.groups, b.groups),
        },
        {
          title: this.$t('Status'),
			  	dataIndex: 'status',
			  	key: 'status',
          width: 130,
          ellipsis: true,
          scopedSlots:{customRender:'status'},
          sorter: (a, b) => a.status.length - b.status.length,
        },
        {
			  	title:this.$t('Operate'),
			  	dataIndex: 'operate',
			  	key: 'operate',
			  	width: 150,
			  	scopedSlots:{customRender:'operation'},
			  }
      ],
      tableData: [],
      gatewayInfo: [],
      addAccessPathModal: false,
      editAccessPathModal: false,
      delAccessPathModal: false,
      topologyVisible: false,
      targetData: {}
    }
  },

  mounted() {
    this.getTableData();
    this.getGatewayInfo();
  },

  watch: {
    "$store.state.language"() {
      this.pathColumns = [
        {
          title: this.$t('Name2'),
			  	dataIndex: 'name',
			  	key: 'name',
			  	ellipsis: true,
          sorter: (a, b) => this.sortName(a.name, b.name),
        },
        {
          title: this.$t('Gateway-node'),
			  	dataIndex: 'hostname',
			  	key: 'hostname',
          ellipsis: true,
          scopedSlots:{customRender:'gatewayNode'},
          sorter: (a, b) => a.hostname.length - b.hostname.length,
        },
        {
          title: this.$t('Client-group'),
			  	dataIndex: 'groups',
			  	key: 'groups',
          ellipsis: true,
          scopedSlots:{customRender:'clientGroup'},
          sorter: (a, b) => this.sortName(a.groups, b.groups),
        },
        {
          title: this.$t('Status'),
			  	dataIndex: 'status',
			  	key: 'status',
          width: 130,
          ellipsis: true,
          scopedSlots:{customRender:'status'},
          sorter: (a, b) => a.status.length - b.status.length,
        },
        {
			  	title:this.$t('Operate'),
			  	dataIndex: 'operate',
			  	key: 'operate',
			  	width: 150,
			  	scopedSlots:{customRender:'operation'},
			  }
      ];
    },
  },

  methods: {
    //获取表格数据
    async getTableData() {
      this.tableLoading = true;
      const res = await this.$api.iscsi.getTargetListRequest();
      // console.log('获取target列表', res)
      if(res && res.data.flag === 0) {
        this.tableData = res.data.gatewayInfo;
      }
      this.tableLoading = false;
    },

    // 获取网关信息
    async getGatewayInfo() {
      const res = await this.$api.iscsi.getGatewayInfoRequest();
      // console.log('获取网关信息', res)
      if(res && res.data.flag === 0) {
        this.gatewayInfo = res.data.gatewayInfo;
      }
    },

    //打开拓扑图
		openTopology(record) {
			this.targetData = record;
			this.topologyVisible = true;
		},

    // 打开新增访问路径弹窗
    addTarget() {
      this.addAccessPathModal = true;
    },

    // 打开编辑访问路径弹窗
    editAccessPath(record) {
      this.targetData = record;
      this.editAccessPathModal = true;
    },

    // 打开删除访问路径弹窗
    delAccessPath(record) {
      this.targetData = record;
      this.delAccessPathModal = true;
    },

    // 关闭操作弹窗
    closeOperationModal(type) {
      if(type === 'close-add') {
        this.addAccessPathModal = false;
      }else if(type === 'close-edit') {
        this.editAccessPathModal = false;
      }else if(type === 'close-del') {
        this.delAccessPathModal = false;
      }else if(type === 'close-topology') {
        this.topologyVisible = false;
      }
    },

    // 对名称进行排序
    sortName(a, b) {
      return sortName(a, b)
    },

    // 操作成功后，更新数据
    updateData() {
      this.getTableData();
      this.getGatewayInfo();
    },
  },
}
</script>
<style scoped>
  .out-box {
    padding: 15px;
  }
  .line-operate-box {
    margin-bottom: 10px;
  }
  .operate-icon {
    margin-right: 5px;
  }
</style>